<template>
	<view>
		<u-navbar leftIconSize="0px" title="瑞安市加叻服饰经营部" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="merchantBox">
			<image class="merHeader" src="../../../static/uni.png"></image>
			<text class="merName">瑞安市加叻服饰经营部</text>
		</view>
		<view class="QRCode flex-center" @click="goReceiptQRCode">
			<image src="../../../static/icons/money-receiving-QRcode.png"></image>
			<text>收款码</text>
		</view>
		<view class="businessDataBox">
			<view class="top">
				<text class="title">经营数据</text>
				<text class="tips">截止到2025年01月08日</text>
				<text class="more">更多</text>
			</view>
			<text class="title2">今日店铺积分</text>
			<view class="countBox flex-center">
				<u-count-to color="black" :startVal="30" endVal="4500.55" :decimals="2"></u-count-to>
			</view>
			<view class="titleBox" @click="infoopen">
				<text class="title">今日等级奖励积分：<text>0.00</text></text>
				<uni-icons class="icons" color="#f3ba43" type="info" size="20"></uni-icons>
				<text class="tips">统计范围</text>
			</view>
			<view class="dataMenuBox">
				<view class="itemBox" @click="todaysMenuCheck('revenue')">
					<view class="content">
						<text class="title">今日营业额(元)</text>
						<text class="info">0.<text>00</text></text>
					</view>
					<view class="check" v-show="activeTodaysMenu == 'revenue'">
						<view class="line"></view>
					</view>
				</view>
				<view class="itemBox" @click="todaysMenuCheck('order')">
					<view class="content">
						<text class="title">今日订单数(单)</text>
						<text class="info">0</text>
					</view>
					<view class="check" v-show="activeTodaysMenu == 'order'">
						<view class="line"></view>
					</view>
				</view>
				<view class="itemBox" @click="todaysMenuCheck('receivable')">
					<view class="content">
						<text class="title">今日应收(元)</text>
						<text class="info">0.<text>00</text></text>
					</view>
					<view class="check" v-show="activeTodaysMenu == 'receivable'">
						<view class="line"></view>
					</view>
				</view>
			</view>
			<view class="contentBox">
				<view class="revenueBox" v-if="activeTodaysMenu == 'revenue'">
					<view class="item">
						<text class="title">店铺收款营业额</text>
						<text class="info">0.00</text>
					</view>
					<view class="item">
						<text class="title">店铺收款退款</text>
						<text class="info">0.00</text>
					</view>
					<view class="item">
						<text class="title">汇款订单营业额</text>
						<text class="info">0.00</text>
					</view>
					<view class="item">
						<text class="title">汇款订单退款</text>
						<text class="info">0.00</text>
					</view>
				</view>
				<view class="orderBox" v-if="activeTodaysMenu == 'order'">
					<view class="item">
						<text class="title">收款订单数：</text>
						<text class="info">0</text>
					</view>
					<view class="item">
						<text class="title">收款订单数：</text>
						<text class="info">0</text>
					</view>
				</view>
				<view class="receivableBox" v-if="activeTodaysMenu == 'receivable'">
					<view class="item">
						<text class="title">收款金额：</text>
						<text class="info">0.00</text>
					</view>
					<view class="item">
						<text class="title">退款金额：</text>
						<text class="info">0.00</text>
					</view>
				</view>
			</view>
			<text class="statisticsTips"><text>*</text>统计数据时间：今日0:00~当前</text>
		</view>
		<view class="businessDataBox" v-show="yesterdayShow">
			<view class="top">
				<text class="title">昨日数据</text>
			</view>
			<text class="title3">2025年01月09日00:00:00~23:59:59</text>
			<view class="dataMenuBox">
				<view class="itemBox" @click="yesterdayMenuCheck('revenue')">
					<view class="content">
						<text class="title">营业额(元)</text>
						<text class="info">0.<text>00</text></text>
					</view>
					<view class="check" v-show="activeYesterdayMenu == 'revenue'">
						<view class="line"></view>
					</view>
				</view>
				<view class="itemBox" @click="yesterdayMenuCheck('order')">
					<view class="content">
						<text class="title">订单数(单)</text>
						<text class="info">0</text>
					</view>
					<view class="check" v-show="activeYesterdayMenu == 'order'">
						<view class="line"></view>
					</view>
				</view>
				<view class="itemBox" @click="yesterdayMenuCheck('receivable')">
					<view class="content">
						<text class="title">应收(元)</text>
						<text class="info">0.<text>00</text></text>
					</view>
					<view class="check" v-show="activeYesterdayMenu == 'receivable'">
						<view class="line"></view>
					</view>
				</view>
			</view>
			<view class="contentBox">
				<view class="revenueBox" v-if="activeYesterdayMenu == 'revenue'">
					<view class="item">
						<text class="title">店铺收款营业额</text>
						<text class="info">0.00</text>
					</view>
					<view class="item">
						<text class="title">店铺收款退款</text>
						<text class="info">0.00</text>
					</view>
					<view class="item">
						<text class="title">汇款订单营业额</text>
						<text class="info">0.00</text>
					</view>
					<view class="item">
						<text class="title">汇款订单退款</text>
						<text class="info">0.00</text>
					</view>
				</view>
				<view class="orderBox" v-if="activeYesterdayMenu == 'order'">
					<view class="item">
						<text class="title">收款订单数：</text>
						<text class="info">0</text>
					</view>
					<view class="item">
						<text class="title">收款订单数：</text>
						<text class="info">0</text>
					</view>
				</view>
				<view class="receivableBox" v-if="activeYesterdayMenu == 'receivable'">
					<view class="item">
						<text class="title">收款金额：</text>
						<text class="info">0.00</text>
					</view>
					<view class="item">
						<text class="title">退款金额：</text>
						<text class="info">0.00</text>
					</view>
				</view>
			</view>
			<view style="width: 100%; height: 40rpx; float: left;"></view>
		</view>
		
		<view class="yesterdayBox" @click="yesterdayCheck">
			<image :style="{transform: yesterdayShow ? 'rotateX(180deg)' : 'rotateX(0deg)'}" src="../../../static/icons/bottom-3.png"></image>
			<text>{{yesterdayShow ? '收起':'展开'}}昨日数据</text>
		</view>
		
		<view class="businessDataBox" @click="goVoucher">
			<view class="top">
				<text class="title">累计抵用券：93683.44</text>
			</view>
			<view class="dataBox">
				<view class="item">
					<text class="title_one" style="margin-left: 0rpx;">可用抵用券</text>
					<text class="info" style="margin-left: 0rpx;">3.<text>19</text></text>
				</view>
				<view class="line"></view>
				<view class="item">
					<text class="title_one">冻结抵用券</text>
					<text class="info">0.<text>58</text></text>
				</view>
				<view class="line"></view>
				<view class="item">
					<text class="title_one">活动为生效</text>
					<text class="info">0.<text>00</text></text>
				</view>
				<view class="line"></view>
				<view class="item">
					<text class="title_one">潮客可激活</text>
					<text class="info">1.<text>74</text></text>
				</view>
			</view>
		</view>
		<view class="businessDataBox" @click="goIntegration">
			<view class="top">
				<text class="title">积分：93683.44</text>
			</view>
			<view class="dataBox">
				<view class="item_two">
					<text class="title_two" style="margin-left: 0rpx;">补贴积分</text>
					<text class="info" style="margin-left: 0rpx;">3.<text>19</text></text>
				</view>
				<view class="line"></view>
				<view class="item_two">
					<text class="title_two">会员积分</text>
					<text class="info">1.<text>74</text></text>
				</view>
				<view class="line"></view>
				<view class="item_two">
					<text class="title_two">潮客积分</text>
					<text class="info">1.<text>74</text></text>
				</view>
			</view>
		</view>
		<view class="activityBox">
			<image class="icon" src="../../../static/icons/merchant-activity.png"></image>
			<text>参与活动</text>
			<image class="right" src="../../../static/icons/bottom-3.png"></image>
		</view>
		<view style="width: 100%; float: left; height: 180rpx;"></view>
		
		
		<u-popup :round="5" :closeable="true" mode="center"  :show="infoshow" @close="infoclose" @open="infoopen">
			<view style="width: 600rpx;">
				<view class="flex-center" style="display: flex;padding:20rpx">统计范围</view>
				<view class="vertical-divider"></view>
				
				<view style="padding:20rpx">
					<view style="font-size: 30rpx;">异业联盟</view>
					<view style="font-size: 24rpx;color:#666666">扫码订单、线下汇款、购房订单、品牌使用费、收款订单</view>
				</view>
			</view>
		</u-popup>
		
		<!--底部菜单（动态渲染）-->
		<customTab :activeRouter="activeRouter"></customTab>
	</view>
</template>

<script>
	import customTab from '@/components/customTab';
	export default {
		components:{
			customTab
		},
		created(){
			let routes = getCurrentPages(); //获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route; //获取当前页面路由
			this.activeRouter = '/' + curRoute;
		},
		onShow(){
			let token = uni.getStorageSync('mertoken')
			let exp = uni.getStorageSync('merexp')
			const now = Math.floor(Date.now() / 1000);
			
			if(!token || exp < now){
				this.$Router.push({
					path: '/pages/index/merchantLogin'
				})
			}
		},
		data(){
			return {
				activeRouter:'',
				activeTodaysMenu:'revenue',
				activeYesterdayMenu:'revenue',
				yesterdayShow:false,
				infoshow:false
			}
		},
		methods:{
			todaysMenuCheck(type){
				if(type == this.activeTodaysMenu) return;
				this.activeTodaysMenu = type;
				
			},
			yesterdayMenuCheck(type){
				if(type == this.activeYesterdayMenu) return;
				this.activeYesterdayMenu = type;
			},
			yesterdayCheck()
			{
				this.yesterdayShow = !this.yesterdayShow;
			},
			infoopen() {
				this.infoshow = true
			},
			infoclose() {
			  this.infoshow = false
			},
			goReceiptQRCode(){
				this.$Router.push({
					path: '/pages/merchant/receiptQRCode'
				})
			},
			/**积分明细**/
			goIntegration(){
				this.$Router.push({
					path: '/pages/merchant/integration/index'
				})
			},
			/**抵用券明细**/
			goVoucher(){
				this.$Router.push({
					path:'/pages/merchant/voucher/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.merchantBox{
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		.merHeader{
			width: 90rpx;
			height: 90rpx;
			float: left;
			margin-top: 25rpx;
			border-radius: 50%;
			margin-left: 5%;
		}
		.merName{
			width: calc(90% - 115rpx);
			height: 40rpx;
			float: left;
			margin-left: 25rpx;
			line-height: 40rpx;
			font-size: 32rpx;
			margin-top: 30rpx;
		}
	}
	.QRCode{
		width: 100%;
		height: 90rpx;
		display: flex;
		background-color:#f9bb34;
		box-shadow: 5rpx 5rpx 5rpx rgba(0,0,0,0.05);
		image{
			width: 50rpx;
			height: 50rpx;
		}
		text{
			font-size: 36rpx;
			color: #fff;
			font-weight: bold;
			margin-left: 6rpx;
		}
	}
	.businessDataBox{
		width: 100%;
		float: left;
		height: auto;
		background-color: #fff;
		margin-top: 20rpx;
		.top{
			width: 90%;
			height: 50rpx;
			float: left;
			margin-left: 5%;
			margin-top: 20rpx;
			.title{
				width: auto;
				float: left;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 30rpx;
				font-weight: 450;
				letter-spacing: 1rpx;
			}
			.tips{
				width: auto;
				float: left;
				height: 50rpx;
				line-height: 55rpx;
				font-size: 24rpx;
				margin-left: 15rpx;
				color: rgb(157,157,157);
				letter-spacing: 1rpx;
			}
			.more{
				width: auto;
				height: 50rpx;
				line-height: 50rpx;
				float: right;
				color: #f3ba43;
				font-weight: 450;
			}
		}
		.title2{
			width: 90%;
			height: 65rpx;
			line-height: 60rpx;
			text-align: center;
			float: left;
			margin-left: 5%;
			font-size: 30rpx;
			margin-top: 15rpx;
			font-weight: 400;
		}
		.countBox{
			width: 90%;
			height: 80rpx;
			float: left;
			margin-left:5% ;
			display: flex;
			margin-bottom: 5rpx;
		}
		.title3{
			width: 90%;
			height: 50rpx;
			line-height: 50rpx;
			float: left;
			margin-left: 5%;
			font-size: 27rpx;
			color: rgb(153,153,153);
		}
		.titleBox{
			width: 90%;
			height: 50rpx;
			float: left;
			margin-left: 5%;
			margin-top: 20rpx;
			.title{
				width: auto;
				float: left;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 27rpx;
				color: rgb(63, 63, 63);
			}
			.icons{
				float: right;
				height: 50rpx;
				line-height: 50rpx;
			}
			.tips{
				width: auto;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 27rpx;
				float: right;
				margin-right: 3rpx;
				color: #f3ba43;
			}
		}
		.dataMenuBox{
			width: 90%;
			height: 130rpx;
			float: left;
			margin-left: 5%;
			margin-top: 20rpx;
			.itemBox{
				width: 32%;
				height: 100%;
				float: left;
				margin-right: 2%;
				.content{
					width: 100%;
					height: 110rpx;
					background-color: #fefbec;
					border-top-right-radius: 5rpx;
					border-top-left-radius: 5rpx;
					.title{
						width: 80%;
						height: 50rpx;
						line-height: 50rpx;
						float: left;
						margin-top: 15rpx;
						margin-left: 10%;
						font-size: 26rpx;
						color:rgb(56,52,46);
					}
					.info{
						width: auto;
						float: left;
						margin-left: 10%;
						height: 30rpx;
						line-height: 30rpx;
						font-size: 32rpx;
						font-weight: bold;
						text{
							font-size: 26rpx;
							font-weight: normal;
						}
					}
				}
				.check{
					width: 100%;
					height: 20rpx;
					.line{
						position: relative;
						width: 100%;
						height: 8rpx;
						background-color: #f0c22d;
						border-bottom-left-radius: 5rpx;
						border-bottom-right-radius: 5rpx;
					}
					.line:after {
						content: "";
						position: absolute;
						left: 50%;
						width: 0;
						height: 0;
						margin-top: 7rpx;
						margin-left: -5px;
						border-left: 10px solid transparent;
						border-right: 10px solid transparent;
						border-top: 5px solid #f0c22d;
					}
				}
			}
			.itemBox:nth-child(3){
				margin: 0rpx;
			}
			
		}
		.contentBox{
			width: 90%;
			height: auto;
			float: left;
			margin-left:5%;
			margin-top: 12rpx;
			background-color: #f5f5f5;
			border-radius: 6rpx;
			.revenueBox{
				width: 100%;
				height: 200rpx;
				float: left;
				.item{
					width: 50%;
					height: 100rpx;
					float: left;
					.title{
						margin-top: 10rpx;
						width: 85%;;
						float: left;
						margin-left: 7.5%;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						color: #333;
					}
					.info{
						width: 85%;
						float: left;
						margin-left: 7.5%;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 30rpx;
						color: #333;
					}
				}
			}
			.orderBox,.receivableBox{
				width: 100%;
				height: 70rpx;
				float: left;
				.item{
					width: 50%;
					height: 100%;
					float: left;
					.title{
						width: auto;
						height: 100%;
						line-height: 70rpx;
						float: left;
						margin-left: 7.5%;
						font-size: 28rpx;
						color: #333;
					}
					.info{
						width: auto;;
						float: left;
						margin-left: 6rpx;
						height: 100%;
						line-height: 70rpx;
						font-size: 30rpx;
						color: #333;
					}
				}
			}
		}
		.statisticsTips{
			width: 90%;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 26rpx;
			text-align: left;
			float: left;
			margin-left: 5%;
			color: rgb(153,153,153);
			text{
				font-size: 30rpx;
				color: red;
				line-height: 95rpx;
				float: left;
				margin-right: 8rpx;
			}
		}
		.dataBox{
			width: 90%;
			height: 100rpx;
			margin-bottom: 15rpx;
			float: left;
			margin-left: 5%;
			margin-top: 10rpx;
			.item{
				width: calc(25% - 1rpx);
				float: left;
				height: 100%;
				.title_one{
					width: auto;
					font-size: 27rpx;
					color: rgb(153,153,153);
					height: 30rpx;
					line-height: 30rpx;
					margin-left: 10%;
					float: left;
					margin-top: 10rpx;
				}
				.info{
					width: auto;
					float: left;
					margin-left: 10%;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 32rpx;
					margin-top: 5rpx;
					text{
						font-size: 26rpx;
					}
				}
				
			}
			.item_two{
				width: calc(33.3% - 1rpx);
				float: left;
				height: 100%;
				.title_two{
					width: 85%;
					font-size: 28rpx;
					color:#666666;
					height: 30rpx;
					line-height: 30rpx;
					float: left;
					margin-top: 10rpx;
					margin-left: 15%;
				}
				.info{
					width: auto;
					float: left;
					margin-left: 15%;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 32rpx;
					margin-top: 5rpx;
					text{
						font-size: 26rpx;
					}
				}
			}
			.line{
				width: 1rpx;
				height: 55rpx;
				margin-top: 22rpx;
				float: left;
				background-color: rgb(216,216,216);
			}
		}
	}
	.yesterdayBox{
		width: 100%;
		height: 115rpx;
		background-color: #fff;
		float: left;
		margin-top: 20rpx;
		image{
			width: 40rpx;
			height: 40rpx;
			position: relative;
			left: 50%;
			margin-left: -20rpx;
			margin-top: 20rpx;
		}
		text{
			float: left;
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
			width: 100%;
			font-size: 26rpx;
			color:rgb(153,153,153);
			margin-top: -10rpx;
		}
	}
	.activityBox{
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		margin-top: 20rpx;
		float: left;
		.icon{
			width: 50rpx;
			height: 50rpx;
			float: left;
			margin-left: 5%;
			margin-top: 15rpx;
		}
		text{
			font-size: 27rpx;
			width: auto;
			height: 80rpx;
			line-height: 80rpx;
			float: left;
			margin-left: 10rpx;
			font-weight: 400;
		}
		.right{
			width: 40rpx;
			height: 40rpx;
			float: right;
			margin-right: 5%;
			margin-top: 20rpx;
			transform: rotate(-90deg);
		}
	}
	.vertical-divider {
		float: left;
		width: 100%;
		height: 2rpx;
		background-color: #D8D8D8;
	}
</style>